<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit" />
<title>志邦U客数据作战室</title>
<link rel="stylesheet" type="text/css" href="./assets/css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="./assets/css/index.css"/>
<script src="assets/js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/lib/banner.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/lib/fsrPMD.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	
<div v-cloak class="dm-bannerMod" id="banner">
	<div class="dm-bannerBox ani">
	
		<!-- 订单数据 -->
		<ul class="box">
			<li class="head-top">志邦U客数据作战室</li>
			<li class="cotMod">
				<div class="title-wrap">
					<ul class="dm-clearfix">
						<li class="tc" style="text-align:center;">全国累计订单</li>
						<!-- <li class="dm-right">线上订单占比 99.94%</li> -->
					</ul>
					<div class="num tc">288,006单</div>
				</div>
				
				<div class="time">{{time}}</div>
				
				<div class="fourMod dm-clearfix">
					<dl>
						<dt class="bt dm-clearfix">
							<div class="t1 dm-left">意向数</div>
							<div class="t2 dm-left">个人</div>
							<div class="t3 dm-right">Top10</div>
						</dt>
						<dd class="listBox" id="personMod">
							<div>
								<ol class="list dm-clearfix" v-for="(item,index) in person">
									<li class="photo dm-left">
										<span class="cover"><img src="assets/image/default.png" alt="图片" /></span>
									</li>
									<li class="name dm-left" :title="item.name">{{item.name}}</li>
									<li class="num dm-right">{{item.val}}万</li>
								</ol>
							</div>
						</dd>
					</dl>
					<dl>
						<dt class="bt dm-clearfix">
							<div class="t1 dm-left">意向数</div>
							<div class="t2 dm-left">城市</div>
							<div class="t3 dm-right">Top10</div>
						</dt>
						<dd class="listBox" id="cityMod">
							<div>
								<ol class="list dm-clearfix" v-for="(item,index) in city">
									<li class="photo cover dm-left">
										<span class="cover"><img src="assets/image/default.png" alt="图片" /></span>
									</li>
									<li class="name dm-left" :title="item.name">{{item.name}}</li>
									<li class="num dm-right">{{item.val}}万</li>
								</ol>
							</div>
						</dd>
					</dl>
					<dl>
						<dt class="bt dm-clearfix">
							<div class="t1 dm-left">意向数</div>
							<div class="t2 dm-left">省份</div>
							<div class="t3 dm-right"></div>
						</dt>
						<dd class="listBox" id="convinceMod">
							<div>
								<ol class="list dm-clearfix" v-for="(item,index) in convince">
									<li class="photo cover dm-left">
										<span class="cover"><img src="assets/image/default.png" alt="图片" /></span>
									</li>
									<li class="name dm-left" :title="item.name">{{item.name}}</li>
									<li class="num dm-right">{{item.val}}万</li>
								</ol>
							</div>
						</dd>
					</dl>
					<dl>
						<dt class="bt dm-clearfix">
							<div class="t1 dm-left">意向数</div>
							<div class="t2 dm-left">战区</div>
							<div class="t3 dm-right"></div>
						</dt>
						<dd class="listBox">
						
							<template v-for="(item,index) in area">
								<ol class="list dm-clearfix" v-if="index%3 == 0">
									<li class="areaMod dm-left" v-for="(sub,idx) in area" v-if="idx >= index && idx < index+3">
										<div class="icon">
											<img :src="idx == 1 ? 'assets/image/area-icon-2.png' : 'assets/image/area-icon.png' " alt="图片" />
										</div>
										<h6 class="area" :title="sub.name">{{sub.name}}</h6>
										<p class="amount">{{sub.val}}个</p>
									</li>
								</ol>
							</template>
							
						</dd>
					</dl>
				</div>
			
				<!-- <div class="addrTotal">
					<h5 class="name">安徽省</h5>
					<ul class="addrMod">
						<li class="dm-clearfix h5">
							<h5 class="t1 dm-left">访客数</h5>
							<h5 class="t2 dm-right">175人</h5>
						</li>
						<li class="top-addr h5">
							<h5 class="t1 dm-left">成交金额</h5>
							<h5 class="t2 dm-right">28.8万元</h5>
							<div class="dm-clear"></div>
						</li>
					</ul>
				</div> -->
				
			</li>
		</ul>
		
		
	</div>
	
</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#banner",
	data:{
		type:0,
		time:'',
		person:[],
		city:[],
		convince:[],
		area:[]
	},
	methods:{
		//生成banner函数
		createBanner:function(){
			new banner('#banner',{
				loop:false,
				tap:false,
				dot:false
			});
		},
		//时间
		getTime:function(){
			var time = new Date();
			var y = time.getFullYear();
			var m = time.getMonth()+1 < 10 ? '0'+(time.getMonth()+1) : time.getMonth()+1;
			var d = time.getDate() < 10 ? '0'+time.getDate() : time.getDate();
			var h = time.getHours() < 10 ? '0'+time.getHours() : time.getHours();
			var f = time.getMinutes() < 10 ? '0'+time.getMinutes() : time.getMinutes();
			var s = time.getSeconds() < 10 ? '0'+time.getSeconds() : time.getSeconds();
			
			this.time = y+'-'+m+'-'+d+' '+h+':'+f+':'+s;
			window.requestAnimationFrame(this.getTime);
		},
		//读取数据
		getInfoData:function(){
			var that = this;
			$.getJSON('data/data.json',function(res){
				console.log(res);
				
				that.person = res.person;
				that.city = res.city;
				that.convince = res.convince;
				that.area = res.area;
				
				setTimeout(function(){
					//走马灯效果
					$(".listBox").each(function(){
						var target = $(this);
						var id = target.prop('id');
						if(id){
							target.fsrPMD({
								Event:'mouseover',
								Id:id,
								Bq:'div',
								Fx:'down',
								Time:15
							});
						};
					});
				},30);
				
			});
		},
	},
	mounted:function(){
		//启用生成banner
		this.createBanner();
		window.requestAnimationFrame(this.getTime);
		this.getInfoData();
	}
});

window.onload = function(){
	
	
};
	
</script>
	
</body>
</html>
